<template>
  <ul class="w-timeline">
    <li class="w-timeline-item" v-for="(item, i) in items" :key="i">
      <component
        class="w-timeline-item__bullet"
        :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
        :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }"
        >{{ item[itemIconKey] || icon }}</component
      >
      <slot
        name="item"
        v-if="!$slots[`item.${i + 1}`]"
        :item="item"
        :index="i + 1"
      >
        <div
          class="w-timeline-item__title"
          :class="{
            [item[itemColorKey] || color]: item[itemColorKey] || color
          }"
          v-html="item[itemTitleKey]"
        ></div>
        <div
          class="w-timeline-item__content"
          v-html="item[itemContentKey]"
        ></div>
      </slot>
      <slot :name="`item.${i + 1}`" v-else :item="item" :index="i + 1"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  name: "w-timeline",
  props: {
    items: { type: [Array, Number], required: true },
    color: { type: String },
    icon: { type: String },
    itemTitleKey: { type: String, default: "title" },
    itemContentKey: { type: String, default: "content" },
    itemIconKey: { type: String, default: "icon" },
    itemColorKey: { type: String, default: "color" }
  },

  emits: [],
  setup(props,ctx){
    return {}
  },
};
</script>